<template>
  <div class="address-book" >
    <div class="searchHeader scale-1px-bottom" >
      <div class="search_input"> 
        <i class="iconfont icon-sousuolan_sousuo"></i>
        <span class="searchText">请输入客户名称/手机号</span> 
      </div>
    </div>
    <div id="BScroll">
      <div>
        <ul>
          <li class="cell van-hairline--bottom" v-for="item in funsList" :key="item.value">
            <span class="icon-box">
              <svg class="icon-svg" aria-hidden="true">
                <use :xlink:href="`#icon-${item.icon}`"></use>
              </svg>
              <MessageTips slot="extra" :news="20" />
            </span>
            <span class="title">{{ item.name }}</span>
          </li>
        </ul>
        <ul>
          <li class="group-title">我的企业</li>
          <li class="cell">
            <span class="icon-box">
              <svg class="icon-svg" aria-hidden="true">
                <use xlink:href="#icon-logo"></use>
              </svg>
            </span>
            <span class="title" :style="{color: groupName ? '#13284D' : '#9BA4B4' }" >{{ groupName ? groupName : '加入经纪公司' }}</span>
            <span style="color: #9BA4B4;">{{ '请选择'  }}<i class="iconfont icon-wode-erjizhe"></i></span>
          </li>
        </ul>
        <ul class="list-view">
          <li v-for="group in singers" class="listGroup" :key="group.id">
            <h2 class="list-group-title">{{ group.title }}</h2>
            <ul>
              <li v-for="item in group.items" class="list-group-item van-hairline--bottom" :key="item.id">
                <img v-lazy="item.avatar" alt="头像" class="avatar">
                <div class="item-info">
                  <p class="name">{{ item.name }}</p>
                  <p class="tips">{{ '17:20 | 来自文章分享' }}</p>
                </div>
              </li>
              <li v-if="group.isNext" class="next">查看更多</li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <index-bar :shortcutList="shortcutList"></index-bar>
    <!-- </div> -->
    <!-- <Avatar size="normal"> 
      <MessageTips slot="extra" :news="200" />
    </Avatar>
    <div class="dialog-list">
      <van-button type="primary" @click="handleClick1">标题和内容确定框</van-button>
      <van-button type="primary" @click="handleClick2">内容确定框</van-button>
      <van-button type="primary" @click="handleClick3">标题确定框</van-button>
      <van-button type="primary" @click="handleClick4">标题和弹窗内容确定取消框</van-button>
      <van-button type="primary" @click="handleClick5">内容确定取消框</van-button>
      <van-button type="primary" @click="handleClick6">标题确定取消框</van-button>
    </div>
    <div class="toast-list">
      <van-button type="primary" @click="handleClick7">提示内容</van-button>
      <van-button type="primary" @click="handleClick8">提示内容长</van-button>
      <van-button type="primary" @click="handleClick9">成功提示</van-button>
      <van-button type="primary" @click="handleClick10">失败提示</van-button>
      <van-button type="primary" @click="handleClick11">loading动画</van-button>
    </div> -->
  </div>
</template>

<script>
import Avatar from '@/components/Avatar'
import MessageTips from '@/components/MessageTips'
import indexBar from '@/components/indexBar'
import singers from './testData'

const funsList = [
  { name: '动态', value: '1', num: 20, icon: 'shouye_dongtai' },
  { name: '分组', value: '2', num: 20, icon: 'shouye_kehu' },
  { name: '消息', value: '3', num: 20, icon: 'shouye-xiaoxi' },
]

export default {
  data() {
    console.log()
    let shortcutList =  singers.map((group) => {
      return group.title.substr(0, 1)
    })
    return {
      singers,
      funsList,
      groupName: '深圳中原地产有限公司',
      shortcutList
    }
  },
  methods: {
    handleClick1() {
      this.$dialog.alert({
        title: '标题',
        message: '弹窗内容'
      }).then(() => {
        // on close
      });
    },
    handleClick2() {
      this.$dialog.alert({
        message: '弹窗内容'
      }).then(() => {
        // on close
      });
    },
    handleClick3() {
      this.$dialog.alert({
        title: '标题'
      }).then(() => {
        // on close
      });
    },
    handleClick4() {
      this.$dialog.confirm({
        title: '标题',
        message: '弹窗内容'
      }).then(() => {
        // on confirm
      }).catch(() => {
        // on cancel
      });
    },
    handleClick5() {
      this.$dialog.confirm({
        message: '弹窗内容'
      }).then(() => {
        // on confirm
      }).catch(() => {
        // on cancel
      });
    },
    handleClick6() {
      this.$dialog.confirm({
        title: '标题'
      }).then(() => {
        // on confirm
      }).catch(() => {
        // on cancel
      });
    },
    handleClick7() {
      this.$toast('提示内容');
    },
    handleClick8() {
      this.$toast('提示内容提示内容提示内容提示内容提示内容提示内容');
    },
    handleClick9() {
      this.$toast.success('成功文案');
    },
    handleClick10() {
      this.$toast.fail('失败文案');
    },
    handleClick11() {
      this.$toast.loading({
        mask: true,
        // duration: 0,
        message: '加载中...'
      });
    }
  },
  components: {
    Avatar,
    indexBar,
    MessageTips
  }
}
</script>

<style lang="less" scoped>
.dialog-list, .toast-list {
  button {
    margin: 10px;

  }
}

#BScroll {
  
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.address-book {
  position: relative;
  .searchHeader {
    width: 100%; 
    background: #fff;
    padding: 10px 16px; 
    overflow: hidden;
    .search_input { 
      background: #F2F6F7;
      border-radius: 4px;
      height: 36px;
      width: 100%;
      line-height: 36px;
      display: flex;
      align-items: center;
      i {
        color: #969EA8;
        margin: 0 8px 0 12px;
      }
      .searchText {
        font-size:14px;
        color:#969EA8;
      }
    }
  }

  .cell {
    padding: 8px 16px;
    display: flex;
    font-size: 16px;
    align-items: center;
    .icon-box {
      width: 36px;
      height: 36px;
      position: relative;
      .icon-svg {
        width: 36px;
        height: 36px;
        // vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
      /deep/ .news {
        top: -8px;
        right: -6px;
        transform: scale(0.8);
      }
    }
    .title {
      flex: 1;
      margin-left: 16px;
      line-height: 36px;
    }
  }

  .group-title {
    height: 32px;
    line-height: 32px;
    padding-left: 16px;
    font-size: 12px;
    color: #405170;
    background: #F7F9FA;
  }

  .list-view {
    .listGroup {
      padding-bottom: 30px;
      .list-group-title {
        height: 32px;
        line-height: 32px;
        padding-left: 16px;
        font-size: 12px;
        color: #405170;
        background: #F7F9FA;
      }
      .list-group-item {
        display: flex;
        align-items: center;
        padding: 10px 16px;
        .avatar {
          width: 36px;
          height: 36px;
          border-radius: 50%;
        }
        .item-info {
          padding-left: 16px;
        }
        .name {
          // margin-left: 20px;
          line-height: 24px;
          color: #13284D;
          font-size: 14px;
        }
        .tips {
          line-height: 16px;
          color: #9BA4B4;
          font-size: 12px;
        }
      }
      .next {
        font-size: 14px;
        text-align: center;
        padding: 12px 0;
      }
    }
  }
}

</style>